<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/hui/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/hui/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/layer/formSelects/formSelects-v4.css" />
<link rel="stylesheet" href="/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="/vue/vue.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>字典数据</title>
</head>
<body class="pos-r">
<div id="app">
	<div>
		<div class="page-container">
		
			<div class="panel panel-default radius">
				<div class="panel-header">查询条件</div>
				<div class="panel-body">
					
					字典名称：<span class="select-box" style="width:250px;">
							<select class="select" v-model="search.model.dictType" >                                        
							     <option th:each="dict : ${dictList}" th:text="${dict['dictName']}" th:value="${dict['dictType']}" th:field="*{dictType.dictType}"></option>                                
							</select>
						</span>
					<button class="btn btn-success radius" @click="searchData"><i class="Hui-iconfont">&#xe665;</i> 查询</button>
					<a class="btn btn-danger radius" data-id="dictType" href="/system/dict" ><i class="Hui-iconfont">&#xe66b;返回</i></a> 
				</div>
			</div>
			
			<div class="cl pd-5 bg-1 bk-gray mt-20"> 
				<span class="l">
					<a href="javascript:;" class="btn btn-primary radius" @click="addData">新建数据</a>
				</span>
			</div>
			<table id="tables" class="table table-border table-bordered table-bg table-hover table-sort radius">
				<thead>
					<tr class="text-c">
						<th width="40">字典编号</th>
						<th width="40">字典标签</th>
						<th width="40">字典键值</th>
						<th width="40">字典排序</th>
						<th width="40">状态</th>
						<th width="40">备注</th>
						<th width="40">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr class="text-c va-m" v-for="m in record" v-cloak>
						<td>{{m.dictCode}}</td>
						<th>{{m.dictLabel}}</th>
						<td>{{m.dictValue}}</td>
						<td>{{m.dictSort}}</td>
						<td v-if="m.status=='1'">
							<span class="label label-secondary radius">正常</span>
						</td>
						<td v-else>
							<span class="label label-danger radius">禁用</span>
						</td>
						<td>{{m.remark}}</td>
						<td class="td-manage">
							<a style="text-decoration:none" @click="openUpdate(m)" href="javascript:;" title="修改字典"><i class="Hui-iconfont">&#xe6df;修改</i></a> 
						</td>
					</tr>
				</tbody>
			</table>
			<div class="cl pd-5 bg-1 bk-gray">
				<span class="l">共有数据：<strong v-cloak>{{page.total}}</strong> 条</span>
				<span class="r"><div id="laypage"></div></span>
			</div>
		</div>
	</div>
	
	
	<div id="dataDiv" v-show="false">
		<form class="form form-horizontal" id="dataForm" action="#" style="width: 400px;">
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-4"><span style="color:red;">*</span> 字典标签：</label>
				<div class="formControls col-xs-8">
					<input type="text" class="input-text radius size-M" id="dictLabel" name="dictLabel" v-model="selectData.dictLabel">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-4"><span style="color:red;">*</span>字典键值：</label>
				<div class="formControls col-xs-8">
					<input type="text" class="input-text radius size-M" id="dictValue" name="dictValue" v-model="selectData.dictValue">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-4"><span style="color:red;">*</span>字典类型：</label>
				<div class="formControls col-xs-8">
					<input type="text" class="input-text radius size-M disabled" name="dictType" disabled="disabled" id="dictType" v-model="selectData.dictType">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-4"><span style="color:red;">*</span>状态：</label>
				<div class="formControls col-xs-8">
					<span class="select-box">
						<select class="select" v-model="selectData.status" name="status">                                        
						    <option value="1" >正常</option>                                    
						    <option value="0" >禁用</option>                                    
						</select>
					</span>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-4">备注：</label>
				<div class="formControls col-xs-8">
					<textarea class="textarea radius size-M" id="remark" v-model="selectData.remark" ></textarea>
				</div>
			</div>
		</form>
	</div>
	
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/hui/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script> 

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/layer/2.4/layui.all.js"></script>
<script src="/layer/formSelects/formSelects-v4.js" type="text/javascript"></script>
<script type="text/javascript" src="/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="/jquery.validation/1.14.0/messages_zh.js"></script> 
<script>


$(function(){
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	})
	$("#dataForm").validate({
		rules:{
			dictLabel:{
				required:true,
			},
			dictValue:{
				required:true,
			},
			dictType:{
				required:true,
			},
			status:{
				required:true,
			},
		},
		messages: {
	      dictLabel:{
	        required:"请输入字典标签",
	      },
	      dictValue:{
	        required:"请输入字典键值",
	      },
	      dictType:{
	        required:"请先选择字典类型",
	      },
	      status:{
	        required:"请选择状态",
	      },
	    }
	});
});
var app = new Vue({
  el: '#app',
  data: {
	index:0,
	selectData:{},
	num:0,
  	page:{
    	pages:0,
        size:10,
        current:1,
        total:0
	},
	search:{
    	model:{
    		dictType:'[[${dictType.dictType}]]',
    	}
    },
  	record:[]
  },
  methods:{
	  searchData:function(){
	  		this.page.current=1;
	  		this.loadList();
	  },
	  openUpdate:function(data){
	  	var _this=this;
	  	_this.selectData=data;
	  	var el = $("#dataDiv");
		  	//更换水表
		  	layer.open({
				  type: 1,
				  title:"修改字典数据",
				  skin: 'layui-layer-rim', //加上边框
				 area: ['460px', '420px'], //宽高
				  content: el,
				  btn:['修改'],
				  yes:function(index,layero){
				 		if(!$("#dataForm").valid()){
				  			layer.msg('请按要求完善信息！');
				  			return false;
				  		}
						var idx = layer.load(1, {shade:  [0.1,'#fff'] });
						var params = {};
						for(var key in _this.selectData){
							params[key] = _this.selectData[key];
						}
						$.ajax({
							url:'/system/dict/data/modify',
							type:'post',
							data:params,
							dataType: "json",
							success: function(data){
								layer.close(idx);
								if (data.status=="SUCCESS") {
									app.searchData();
									layer.msg(data.message,function(){
										 layer.closeAll();
									});	
					        	} else {
					        		layer.msg(data.message);
					        	}
					        	
							},
							error:function(){
								layer.msg('网络异常');
								layer.close(idx);
							}
						});
				  		
				  }
			});
	  },
	  loadList:function(){
		  this.index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
		  var params = {};
		  for(var key in this.page){
			  params[key] = this.page[key];
		  }
		  for(var key in this.search.model){
			  params[key] = this.search.model[key];
		  }
		  $.ajax({
		        url:'/system/dict/data/page',
		        type:'post',
		        data:params,
		        dataType: "json",
		        success: function(data){
		        	if (data.status=="SUCCESS") {
		        		app.record=data.data.records;
		        		app.page.total=data.data.total;
		        		app.page.pages=data.data.pages;
		        		app.page.current=data.data.current;
		        		app.pageList();
		        	} else {
		        		layer.msg(data.message);
		        	}
		        	layer.close(app.index);
		       } ,
				error:function(){
					layer.msg('网络异常');
					layer.close(app.index);
				}
		   });
	  },
	  pageList:function(){
		  laypage({
				cont : 'laypage', //容器。值支持id名、原生dom对象，jquery对象
				pages : this.page.pages==0?1:this.page.pages, //通过后台拿到的总页数
				curr : this.page.current,
				groups: 5, //连续显示分页数
		        skip: false, //是否开启跳页
				first: '首页', //若不显示，设置false即可
				last: '尾页', //若不显示，设置false即可
				prev: '上一页', //若不显示，设置false即可
				next: '下一页', //若不显示，设置false即可
				jump: function (e, first) { //触发分页后的回调
			      if (!first) { //一定要加此判断，否则初始时会无限刷新
			    	  	app.page.current = e.curr;
			    	  	app.page.pages = e.pages;
			    	  	app.loadList();
                      }
                  }
			});
	  },
	  addData:function(){
	  	  var _this=this;
	  	  _this.selectData={
	  	  	dictType:_this.search.model.dictType
	  	  };
		  var el = $("#dataDiv");
		  	//更换水表
		  	layer.open({
				  type: 1,
				  title:"新增字典数据",
				  skin: 'layui-layer-rim', //加上边框
				  area: ['460px', '420px'], //宽高
				  content: el,
				  btn:['保存'],
				  yes:function(index,layero){
				 		 if(!$("#dataForm").valid()){
				  			layer.msg('请按要求完善信息！');
				  			return false;
				  		}
						var idx = layer.load(1, {shade:  [0.1,'#fff'] });
						var params = {};
						for(var key in _this.selectData){
							params[key] = _this.selectData[key];
						}
						$.ajax({
							url:'/system/dict/data/add',
							type:'post',
							data:params,
							dataType: "json",
							success: function(data){
								layer.close(idx);
								if (data.status=="SUCCESS") {
									app.searchData();
									layer.msg(data.message,function(){
										 layer.closeAll();
									});	
					        	} else {
					        		layer.msg(data.message);
					        	}
					        	
							},
							error:function(){
								layer.msg('网络异常');
								layer.close(idx);
							}
						});
				  }
			});
	  }
  },
  created: function () {
	   this.loadList();
  },
  mounted:function(){
	  
  }
})
</script>
</body>
</html>